<template>
    <div class="main">
        <div class="head-wrap flex-jsb">
            <div class="flex">
                <el-form :model="form" :inline="true" ref="form" label-width="100px" class="form">
                    <el-form-item label="库房名称：" prop="roomId">
                        <el-select size="mini" v-model="form.roomId" placeholder="请选择库房">
                            <el-option :label="item.title" :value="item.resourceId" :key="item.resourceId"
                                v-for="item in selecData" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="时间段：">
                        <el-date-picker v-model="date" @change="change" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" size="mini" value-format="yyyy-MM-dd"
                            format="yyyy-MM-dd" :clearable="false">
                        </el-date-picker>
                    </el-form-item>
                </el-form>
            </div>
            <div style="width: 130px;">
                <el-button size="mini" @click="handleRset">重置</el-button>
                <el-button size="mini" type="primary" @click="handleSelect">查询</el-button>
            </div>
        </div>
        <div class="bottom-wrap mt15">
            <div class="table-wrap mt15">
                <el-table :data="logList" ref="multipleTable" height="570" style="width: 100%"
                    :cell-style="{ color: '#333' }" class="table">
                    <el-table-column prop="resourceName" label="库房名称" min-width="250" />
                    <el-table-column prop="resourceId" label="库房编号" min-width="250" />
                    <el-table-column prop="totalCabinetCount" label="机柜数量" min-width="250" />
                    <el-table-column prop="onShelfAssets" label="在架资产总数" min-width="250" />
                    <el-table-column prop="position" label="U位" min-width="150" />
                    <el-table-column prop="statisticalDate" label="操作时间" min-width="250" />
                    <el-table-column label="操作" align="center" width="180" fixed="right">
                        <template v-slot="{ row }">
                            <el-button class="text-btn-table" type="text" @click="toDetail(row)">机柜监视</el-button>
                            <el-button class="text-btn-table" type="text" @click="toVideo(row)">机柜视频</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="flex-jsb">
                    <div></div>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page.sync="form.start" :page-sizes="[10, 20, 30, 40]" :page-size="form.limit"
                        layout="total, sizes, prev, pager, next, jumper" :total="total"
                        class="ml25 mt15 systemPagination el-pagination">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { getAutomationRoom } from "@/api/rabotManageApi.js";
import { getMachineRoom } from "@/api/computerRoomApi.js";

export default {
    data() {
        return {
            selecData: [],
            typeMap: [
                {
                    value: "",
                    label: "全部",
                },
                {
                    value: "1",
                    label: "新增",
                },
                {
                    value: "2",
                    label: "移除",
                },
            ],
            form: {
                roomId: "",
                startTime: "",
                endTime: "",
                limit: 10,
                start: 1,
            },
            logList: [],
            date: "",
            total: 0,
        };
    },
    mounted() {
        this.getMachineRoomData();
        this.getAutomationRoomData({ ...this.form, start: this.form.start - 1 });
    },
    methods: {
        getMachineRoomData() {
            getMachineRoom().then(res => {
                if (res.code == "200") {
                    this.selecData = res.info;
                }
            });
        },
        getAutomationRoomData(data) {
            getAutomationRoom(data).then((res) => {
                if ((res.code = "200")) {
                    this.logList = res.info;
                    this.total = res.totalCount;
                }
            });
        },
        handleSizeChange(val) {
            this.form.limit = val;
            this.form.start = 1;
            this.getAutomationRoomData({ ...this.form, start: 0 });
        },

        handleCurrentChange(val) {
            this.form.start = val;
            this.getAutomationRoomData({ ...this.form, start: this.form.start - 1 });
        },
        handleRset() {
            this.form = {
                roomId: "",
                startTime: "",
                endTime: "",
                limit: 10,
                start: 1,
            }
            this.date = "";
            this.getAutomationRoomData({ ...this.form, start: 0 });
        },
        handleSelect() {
            this.getAutomationRoomData({ ...this.form, start: 0 });
        },
        change(date) {
            if (date.length) {
                this.form.startTime = date[0];
                this.form.endTime = date[1];
            }
            console.log(date);
        },
        toDetail(row) {
            this.$router.push({
                path: "/rabotManage/cabinet",
                query: {
                    resourceId: row.resourceId,
                    statisticalDate: row.statisticalDate,
                },
            })
        },
        toVideo(row) {
            this.$router.push({
                path: "/rabotManage/video",
                query: {
                    resourceId: row.resourceId,
                    robotNumber: row.robotNumber,
                    statisticalDate: row.statisticalDate,
                },
            })
        }
    },
};
</script>
<style lang="scss" scoped>
.main {
    width: 100%;
    height: 100%;
    overflow: auto;
    margin: 0 auto;

    .head-wrap {
        padding: 20px 17px;
        border-radius: 6px;

        /deep/ .el-form-item {
            margin-bottom: 0;

            .el-form-item__label {
                color: #000;
            }
        }
    }

    .head-wrap,
    .bottom-wrap {
        background: #ffffff;
        box-shadow: 0px 0px 12px 0px rgba(129, 155, 151, 0.3);
    }

    .bottom-wrap {
        padding: 0 15px;
        border-radius: 10px;
        height: 89%;
        overflow: hidden;

        .table-wrap {
            height: 100%;
            overflow: auto;
            color: #333;

            .table {
                border: 1px solid #f0f0f0;
                border-radius: 0px 0px 6px 6px;
                overflow: hidden;
            }

            /deep/ .el-table__header tr,
            /deep/ .el-table__header th {
                background-color: var(--system-table-header-bgc) !important;
                color: #333;
                font-weight: 400;
            }

            .state {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                margin-right: 5px;
            }

            .state1 {
                background: #ff9000;
            }

            .state2 {
                background: #21b795;
            }
        }
    }
}

.flex-ac {
    display: flex;
    align-items: center;
}

.mt15 {
    margin-top: 15px;
}

.flex {
    display: flex;
}

.flex-jsb {
    display: flex;
    justify-content: space-between;
}

.mt25 {
    margin-top: 25px;
}

.ml25 {
    margin-left: 25px;
}
</style>
